// 引入 react 依赖
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Text, View, Image, TouchableOpacity, ImageBackground, ScrollView, InteractionManager } from 'react-native';

// 引入第三方依赖
import _ from 'lodash';
import pureRender from 'pure-render-decorator';
import { Actions } from 'react-native-router-flux';
import Icon from 'react-native-vector-icons/Ionicons';

// antd 按需加载
import { Tabs, Toast, Portal } from '@ant-design/react-native';

// 引入 处理数据 所需文件
import { myInfo, myCvLog } from '../../module/module.js'

// 引入样式
import Style from './style/style.js';

// 引入公用组件
import { Status, NavBar, CacheImage, RnFlatList } from '../../components/index.js'

// 引入专用组件
import { } from './components'

// 引入工具包
import { } from '../../util/images.js';
import { press, size, ScreenWidth, borderBottom, borderTop, pathHead, requestCardFollowAccount, defaultDataList, onEndReached, onRefresh, concatDataList, defaultPage } from '../../util/utils.js'

class CardUserInfo extends Component {

  constructor(props) {
    super(props)
    this.state = {
      user: null,
      refreshing: false,
      searchBackgroundColor: '#ccc',
      loading: false,
      dataList: {
        total: 0,
        size: 10,
        current: 1,
        pages: 1,
        records: []
      }
    }
  }

  componentDidMount() {
    InteractionManager.runAfterInteractions(() => {
      // ...耗时较长的同步的任务...
      this.showLoadingData()
      this.handleData({
        current: 1,
      })
    });
  }

  showLoadingData(options) {
    this.loading = Toast.loading('加载中', 0)
    this.loadingData(options).then(res => {
      this.setState({
        user: res[0].data
      })
    }).finally(() => {
      Portal.remove(this.loading)
    })
  }

  loadingData(options) {
    const { id } = this.props
    return Promise.all([myInfo({ id })])
  }

  handleData(options) {
    const { data } = this.props
    myCvLog({
      size: 10,
      ...options
    }).then(res => {
      Portal.remove(this.loading)
      this.setState({
        dataList: {
          ...res.data,
          records: this.state.dataList.records.concat(res.data.records)
        }
      })
    }).catch(error => {
      console.log(error, 11111)
    }).finally(() => {
      Portal.remove(this.loading)
    })
  }

  onRefresh = () => {
    this.setState({ refreshing: true });
    const { data } = this.props
    const { dataList: { size } } = this.state
    myCvLog({
      current: 1,
      size: 10,
    }).then(res => {
      this.setState({
        dataList: res.data,
        refreshing: false
      })
    }).catch(error => {
      console.log(error, 11111)
    })
  }

  onEndReached = () => {
    const { dataList: { current, size, records, total } } = this.state
    if (records.length < total) {
      this.handleData({
        current: current + 1,
      })
    }
  }

  onScroll = (e) => {
    const { searchBackgroundColor } = this.state
    if (e.nativeEvent.contentOffset.y >= size(366) - 44) {
      this.setState({
        searchBackgroundColor: '#e43130'
      })
    } else {
      this.setState({
        searchBackgroundColor: 'transparent'
      })
    }
  }

  handleCardFollowAccount(options) {
    // const { handleCardLike } = this.props
    requestCardFollowAccount.call(this, options).then(res => {
      // handleCardLike()
    })
  }

  handleCardLike() {
    // this.loadingData()
    // this.onRefresh()
  }

  render() {
    const { id } = this.props
    const { refreshing, dataList, user } = this.state
    return (
      <View style={Style.container}>
        <Status />
        <NavBar
          title={user ? user.nickname : ''}
          back={true}
        />
        <RnFlatList
          style={{
            flex: 1,
            backgroundColor: '#f0f2f5',
          }}
          onScroll={this.onScroll}
          refreshing={refreshing}
          onRefresh={this.onRefresh}
          onEndReached={this.onEndReached}
          removeClippedSubviews={true}
          data={dataList}
          ListHeaderComponent={() => {
            if (!user) {
              return null
            }
            return (
              <View style={{}}>
                <View style={{
                  backgroundColor: '#fff',
                }}>
                  <View style={{
                    flexDirection: 'row',
                    justifyContent: 'space-between',
                    alignItems: 'center',
                    padding: 15,
                  }}>
                    <View style={{
                      flexDirection: 'row',
                      justifyContent: 'space-between',
                      alignItems: 'center',
                    }}>
                      <CacheImage
                        resizeMod={"contain"}
                        style={{
                          marginRight: 5,
                          width: 22,
                          height: 22,
                          borderRadius: 10,
                          overflow: 'hidden'
                        }}
                        source={{ uri: `${pathHead}${user.avatar}` }}

                      />
                      <Text style={{ fontSize: 16, color: '#8B8B8D', lineHeight: 18, }}>{user.nickname}</Text>
                      <Text style={{ fontSize: 16, color: '#8B8B8D', lineHeight: 18, marginLeft: 10 }}>{user.gender}</Text>
                    </View>
                    {user.follow ? (
                      <TouchableOpacity
                        style={{
                          paddingVertical: 5,
                          paddingHorizontal: 15,
                          borderRadius: 10,
                          borderWidth: 1,
                          borderColor: '#000000'
                        }}
                        onPress={() => {
                          this.handleCardFollowAccount({ id: id, type: 0 })
                        }}
                      >
                        <Text style={{ fontSize: 16, color: '#8B8B8D', lineHeight: 18, }}>取消关注</Text>
                      </TouchableOpacity>
                    ) : (
                        <TouchableOpacity
                          style={{
                            paddingVertical: 5,
                            paddingHorizontal: 15,
                            borderRadius: 10,
                            borderWidth: 1,
                            borderColor: '#000000'
                          }}
                          onPress={() => {
                            this.handleCardFollowAccount({ id: id, type: 1 })
                          }}
                        >
                          <Text style={{ fontSize: 16, color: '#8B8B8D', lineHeight: 18, }}>关注</Text>
                        </TouchableOpacity>
                      )}
                  </View>
                  <View style={{
                    marginBottom: 10,
                    paddingTop: 10,
                    flexDirection: 'row',
                    alignItems: 'center',
                    ...borderTop()
                  }}>
                    <TouchableOpacity style={{ flex: 1 }} onPress={() => Actions.cardMyList({ id })}>
                      <View style={{
                        alignItems: 'center',
                        justifyContent: 'center',
                      }}>
                        <Text style={{ fontSize: 14, color: '#61676F', lineHeight: 16, marginLeft: 10 }}>帖子</Text>
                        <Text style={{ fontSize: 14, color: '#61676F', lineHeight: 16, marginLeft: 10 }}>{user.cardNumber}</Text>
                      </View>
                    </TouchableOpacity>
                    <TouchableOpacity style={{ flex: 1 }} onPress={() => Actions.collectionCard({ id })}>
                      <View style={{
                        alignItems: 'center',
                        justifyContent: 'center',
                      }}>
                        <Text style={{ fontSize: 14, color: '#61676F', lineHeight: 16, marginLeft: 10 }}>收藏</Text>
                        <Text style={{ fontSize: 14, color: '#61676F', lineHeight: 16, marginLeft: 10 }}>{user.collectionNumber}</Text>
                      </View>
                    </TouchableOpacity>
                    <TouchableOpacity style={{ flex: 1 }} onPress={() => Actions.fansList({ id })}>
                      <View style={{
                        alignItems: 'center',
                        justifyContent: 'center',
                        flex: 1,
                      }}>
                        <Text style={{ fontSize: 14, color: '#61676F', lineHeight: 16, marginLeft: 10 }}>粉丝</Text>
                        <Text style={{ fontSize: 14, color: '#61676F', lineHeight: 16, marginLeft: 10 }}>{user.fansNumber}</Text>
                      </View>
                    </TouchableOpacity>
                    <TouchableOpacity style={{ flex: 1 }} onPress={() => Actions.likeCard({ id })}>
                      <View style={{
                        alignItems: 'center',
                        justifyContent: 'center',
                        flex: 1,
                      }}>
                        <Text style={{ fontSize: 14, color: '#61676F', lineHeight: 16, marginLeft: 10 }}>点赞</Text>
                        <Text style={{ fontSize: 14, color: '#61676F', lineHeight: 16, marginLeft: 10 }}>{user.likeNumber}</Text>
                      </View>
                    </TouchableOpacity>

                  </View>
                </View>
                <View style={{ height: 10, backgroundColor: '#e8e8ed' }} />
              </View>
            )
          }}
          renderItem={({ item }) => {
            console.log(item, 678678)
            return (
              <CardPost
                data={item}
                handleCardLike={(option) => this.handleCardLike(option)}
              />
            )
          }}
        />
      </View >
    );
  }
}


export default connect(({ user }) => ({
  user,
}))(pureRender(CardUserInfo))
